<template>
  <div>
    app
    <!-- 1.使用根模块state的数据 -->
    <p>{{this.$store.state.username}}</p>
    <!-- 2.使用根模块getters的数据 -->
    <p>{{$store.getters.newName}}</p>
    <button @click="mutationsfn">更改姓名</button>

  </div>
</template>
<script>
// useStore 拿到仓库实例
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup() {
    // 使用vuex的store仓库
    const store = useStore()
    // 1.使用根模块state的数据
    console.log(store.state.username);
      // 2.使用根模块getters的数据
    console.log(store.getters.newName);
    // 3.提交根模块Mutations函数
    // store.commit('updateName')
    const mutationsfn = () => {
      // 提交mutation函数
      // store.commit('updateName')
      // 4. 调用根模块actions函数
      store.dispatch('updateName')
    }
    return { mutationsfn }
  }
}
</script>